<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./ajax.js"></script>
</body>

</html>
<script>
    //var globalData=null
    //需求：先发请求获取用户信息(用户id，用户头像，用户昵称)，再发请求获取用户的考试成绩(用户id，用户成绩，平均成绩)，再发请求获取近三个月的考试成绩

    //知识点：所有ajax请求的回调函数都是异步执行的
    //如果后一个请求依赖于前一个请求的结果，这样嵌套的ajax调用就产生"回调地狱" 现象

    //可以使用promise技术来解决这个问题(回调地狱)
    ajax("get", "./userinfo.json", {}, function (data) {
        //获取到了用户信息(用户id，用户头像，用户昵称)
        console.log("用户信息：", data);

        ajax("get", "./scores.json", { id: data.id }, function (data) {
            //获取到了考试成绩(用户id，用户成绩，用户昵称)
            console.log("考试成绩：", data);
            ajax("get", "./scores.json", { id: data.id }, function (data) {
                //获取到了考试成绩( 用户id,用户成绩,平均成绩 )
                console.log("三个月的考试成绩:", data);

                ajax("get", "./scores.json", { id: data.id }, function (data) {
                    //获取到了考试成绩( 用户id,用户成绩,平均成绩 )
                    console.log("三个月的考试成绩:", data);

                    ajax("get", "./scores.json", { id: data.id }, function (data) {
                        //获取到了考试成绩( 用户id,用户成绩,平均成绩 )
                        console.log("三个月的考试成绩:", data);
                        ajax("get", "./scores.json", { id: data.id }, function (data) {
                            //获取到了考试成绩( 用户id,用户成绩,平均成绩 )
                            console.log("三个月的考试成绩:", data);
                            ajax("get", "./scores.json", { id: data.id }, function (data) {
                                //获取到了考试成绩( 用户id,用户成绩,平均成绩 )
                                console.log("三个月的考试成绩:", data);

                            })
                        })
                    })
                })
            })
        })
    })
</script>